<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form>


    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      :handleColsWidth="220"
      :isVxeCheckbox="false"
      :isVxeColSeq="false"
      @handleCreateEmit="handleCreateEmit"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
      @customSortMethodEmit="customSortMethodEmit"
    >

      <!-- 操作栏按钮扩展插槽 -->
      <template v-slot:handleExtend="{row}">
        &nbsp;
        <el-button v-if="true" size="mini" type="text" @click="viewSonTable(row)">
          拼接详情配置
        </el-button>
        &nbsp;
        <el-button v-if="true" size="mini" type="text" @click="dataSynchronization(row)">
          同步
        </el-button>
      </template>

    </ex-base-table>

    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult>0"
      :total="tablePage.totalResult"
      :page.sync="tablePage.currentPage"
      :limit.sync="tablePage.pageSize"
      @pagination="pageFindList"
    />


    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData="formSubmitData"
      :gsCvTypeOptions="gsCvTypeOptions"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form>

    <el-dialog
      width="80%"
      :title="paramValMaintainTableTitle"
      :visible.sync="DialogSonTableVisible"
    >
      <ParamValMaintainTable
        ref="paramValMaintainTable"
        :currentRow="currentRow"
        @addSplicingziApiEmit="addSplicingziApiEmit"
      />
    </el-dialog>

    <!-- 同步提交提交组件 -->
    <synchronization
      ref="synchronization"
      v-if="synchronization"
      :synchronization.sync="synchronization"
      :synchronizationData="synchronizationData"
      @synchronizationFromUpdateDataEmit="synchronizationFromUpdateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </synchronization>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import ParamValMaintainTable from './components/ParamValMaintainTable'

import {

  findSplicing,
  addgsMaCode,

  addSplicing,


  deleteSplicing,
  findcvtype,

  updateSplicing,
  splicinggenerate

} from './service/baseApi'

// import{fetchList}from '@/views/SystemParams/SystemParam/service/baseApi.js'
// 基础表格组件
// import ExBaseTable from '@/components/VxeTable/ExBaseTable'
// 基础表格组件
import ExBaseTable from './components/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'
import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

// 同步弹框
import synchronization from './components/synchronization'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm,
    ParamValMaintainTable,
    synchronization
  },
  // 定义属性
  data() {
    return {
      // 检索条件
      formSearchData: {
        gs_s_code: '',  //生成方案编号
        gs_s_name: ''   //生成方案名称
      },
      // 排除条件
      sortField: '',
      sortFlag: '',

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: "",
        gs_s_code: '',      //生成方案编号
        gs_s_name: '',     //生成方案名称
        gs_s_s_date: '',   //生成方案生效日期
        gs_s_e_date: '',  //生成方案失效日期
        gs_cv_type: '',    //生成曲线类型
        gs_cv_name: '',    //生成曲线名称
        // gs_cv_s_date:'',  //生成曲线生效日期
        status: '1',        //状态 （1：有  0:无效）
        remark: '',        //备注

      },
      // 初始重置表单项
      initFormSubmitData: {
        id: "",
        gs_s_code: '',      //生成方案编号
        gs_s_name: '',     //生成方案名称
        gs_s_s_date: '',   //生成方案生效日期
        gs_s_e_date: '',  //生成方案失效日期
        gs_cv_type: '',    //生成曲线类型
        gs_cv_name: '',    //生成曲线名称
        // gs_cv_s_date:'',  //生成曲线生效日期
        status: '1',        //状态 （1：有  0:无效）
        remark: '',        //备注
      },
      gsCvTypeOptions: [],
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

      DialogSonTableVisible: false,
      paramValMaintainTableTitle: '',
      currentRow: {},

      // 同步
      synchronizationData: {
        id: '',
        s_date: '',
        e_date: ''
      },
      synchronization: false,  //同步弹出框


    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {


    /* API数据操作相关 */
    async getaddgsMaCode() {
      return await addgsMaCode().then(({data}) => {
        return data.rows.gs_s_code
      })
    },
    // 数据同步
    dataSynchronization(row) {
      console.log(row)
      this.synchronizationData = Object.assign({}, {id: row.id, startDate: row.gs_s_s_date, endDate: row.gs_s_e_date}) // copy obj
      this.synchronization = true;
      this.$nextTick(() => {
        this.$refs.synchronization.$refs['dataForm'].clearValidate()
      })
    },
    // 同步
    synchronizationFromUpdateDataEmit() {
      console.log(this.synchronizationData)
      splicinggenerate({
        ...this.synchronizationData  //检索条件
      }).then(({data}) => {
        this.findList()
      })
    },

    // 查询数据
    findList() {
      this.loading = true
      console.log(' this.formSearchData:::', this.formSearchData);
      console.log('打印当前页：：：：', this.tablePage.currentPage);
      // 请求表格数据
      findSplicing({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        ...this.formSearchData,  //检索条件
      }).then(({data}) => {
        console.log('response:....', data);
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    findfindcvtype() {
      findcvtype({}).then(({data}) => {
        this.gsCvTypeOptions = data.rows
      })
    },
    pageFindList() {

      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        {field: 'gs_s_code', title: '方案编号', width: 140},
        {field: 'gs_s_name', title: '方案名称', width: 300},
        {field: 'gs_s_s_date', title: '方案生效日期', width: 200},
        {field: 'gs_s_e_date', title: '方案失效日期', width: 200},
        {field: 'gs_cv_typename', title: '曲线类型', width: 200},
        {field: 'gs_cv_name', title: '曲线名称', width: 200},
        // {field: 'gs_cv_s_date', title: '曲线生效日期', width: 200},
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {

      this.getaddgsMaCode().then((gs_s_code) => {
        // 重置表单内容
        this.resetFormSubmitData({
          replaceObj: {
            gs_s_code: gs_s_code
          }
        })
        // 重置表单内容
        this.dialogStatus = type
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
        })
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      this.formSubmitData = Object.assign({}, row) // copy obj
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      console.log("AJAX 请求删除单行数据");
      // this.$refs.exBaseTable.$refs.xTable.remove(row)
      deleteSplicing({
        id: row.id
      }).then(({data}) => {
        console.log('response:....', data);
        // if (data) {
        //   Message({
        //     message: "删除成功" || 'success',
        //     type: 'success',
        //     duration: 5 * 1000
        //   })
        // } else {
        //   Message({
        //     message: "删除失败" || 'Error',
        //     type: 'error',
        //     duration: 5 * 1000
        //   })
        // }
        this.findList()
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        console.log('getList:error', error);
        // alert(error);
      })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData", this.formSubmitData);
      console.log("表单组件相关:此处运行更新数据操作api等");
      updateSplicing({
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {
        console.log('response:....', data);
        // if (data) {
        //   Message({
        //     message: "修改成功" || 'success',
        //     type: 'success',
        //     duration: 5 * 1000
        //   })
        // } else {
        //   Message({
        //     message: "修改失败" || 'Error',
        //     type: 'error',
        //     duration: 5 * 1000
        //   })
        // }
        this.findList()
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        console.log('getList:error', error);
        // alert(error);
      })
    },

    // 增加
    handleFromCreateDataEmit() {
      console.log("this.formSubmitDatathis.formSubmitDatathis.formSubmitDatathis.formSubmitData", this.formSubmitData);
      console.log("表单组件相关:此处运行添加数据操作api等");
      addSplicing({
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {
        console.log('response:....', data);
        // if (data==1) {
        //   Message({
        //     message: "新增成功" || 'success',
        //     type: 'success',
        //     duration: 5 * 1000
        //   })
        // } else if(data==0) {
        //   Message({
        //     message: "新增失败" || 'Error',
        //     type: 'error',
        //     duration: 5 * 1000
        //   })
        // }else if(data==2){
        //   Message({
        //     message: "字典标识+字典对照码不能重复" || 'warning',
        //     type: 'warning',
        //     duration: 5 * 1000
        //   })
        // }
        this.findList()
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }, error => {
        console.log('getList:error', error);
        // alert(error);
      })
    },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      console.log("searchEventEmit", this.formSearchData);
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      console.log("resetSearchEventEmit", this.formSearchData);
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property
      this.sortFlag = order
      console.log('触发排序emit');
      this.findList()

    },

    /* 子表格弹出 */
    viewSonTable(row) {
      this.paramValMaintainTableTitle = `拼接详情配置(方案:${row.gs_cv_name})`
      this.currentRow = Object.assign({}, row) // copy obj
      this.DialogSonTableVisible = true
      // this.$refs.paramValMaintainTable.$refs.addTabelButton.$el.click()

    },
    addSplicingziApiEmit() {
      console.log('addSplicingziApiEmitaddSplicingziApiEmit');
      this.DialogSonTableVisible = false
      this.findList()
    }


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()
    // 初始化生成曲线类型select数据
    this.findfindcvtype()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>
